<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <title>It's Hamster'mind</title>

    <style type="text/css" media="all">
	  @import "css/mainstyle.css";
	  @import "css/board.css";
    </style>
    
    <script src="libs/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="libs/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
    <script src="libs/jquery.sound.js" type="text/javascript"></script>
    <script src="js/serverIo.js" type="text/javascript"></script>
    <script src="js/mastermind.js" type="text/javascript"></script>
    
  </head>
  <body>
    <div id="global">
		<div id="header">
			<img src="images/logo.png" id="imglogo" alt="logo missing"/>
			<img src="images/title.png" id="imgtitle" alt="title missing"/>
			<img src="images/hamsteraccroche.png"  id="imgaccroche" alt="hamsteraccroche missing"/>
		</div>
		<div id="navigation">
			<ul>
				<li><a href="index.html">Accueil</a></li>
				<li class="actuel jouer"><a href="mastermind.html">Hamster'mind!</a></li>
				<li><a href="regles.html">Règles</a></li>
				<li><a href="contact.html">Contact</a></li>
				<li><a href="credits.html">Crédits</a></li>
			</ul>
		</div><!-- #navigation -->
		
		<div id="content">
			<div id="rightcontent">
				<div id="bulle">
					<p>Bon courage...<br /> *snurk snurk*</p>
					<br /><br />[ <span class="cacher_bulle">cacher</span> ]
				</div>
				
				<div id="rightcontent_apresbulle">
					<br /><br /><br />
					<p class="centre"><img src="images/hamster_pirate2.png" alt="hamster" /></p>
					<div id="bullepirate">
					</div>
				</div>
			</div>
			
		    <div id="maincontent">
					<h2>Que la bataille commence!!</h2>
					<br />
					
					<div id="wait"><img src="images/load.gif" alt="wait server" /></div>
					
					<div id="board">
					<div id="resultlines">
							<div id="r12" class="ligneresultat">
								<div id="r12t1" class="petittrou"></div>
								<div id="r12t2" class="petittrou"></div>
								<div id="r12t3" class="petittrou"></div>
								<div id="r12t4" class="petittrou"></div>
							</div>
							
							<div id="r11" class="ligneresultat">
								<div id="r11t1" class="petittrou"></div>
								<div id="r11t2" class="petittrou"></div>
								<div id="r11t3" class="petittrou"></div>
								<div id="r11t4" class="petittrou"></div>
							</div>
							
							<div id="r10" class="ligneresultat">
								<div id="r10t1" class="petittrou"></div>
								<div id="r10t2" class="petittrou"></div>
								<div id="r10t3" class="petittrou"></div>
								<div id="r10t4" class="petittrou"></div>
							</div>
							
							<div id="r9" class="ligneresultat">
								<div id="r9t1" class="petittrou"></div>
								<div id="r9t2" class="petittrou"></div>
								<div id="r9t3" class="petittrou"></div>
								<div id="r9t4" class="petittrou"></div>
							</div>
							
							<div id="r8" class="ligneresultat">
								<div id="r8t1" class="petittrou"></div>
								<div id="r8t2" class="petittrou"></div>
								<div id="r8t3" class="petittrou"></div>
								<div id="r8t4" class="petittrou"></div>
							</div>
							
							<div id="r7" class="ligneresultat">
								<div id="r7t1" class="petittrou"></div>
								<div id="r7t2" class="petittrou"></div>
								<div id="r7t3" class="petittrou"></div>
								<div id="r7t4" class="petittrou"></div>
							</div>
							
							<div id="r6" class="ligneresultat">
								<div id="r6t1" class="petittrou"></div>
								<div id="r6t2" class="petittrou"></div>
								<div id="r6t3" class="petittrou"></div>
								<div id="r6t4" class="petittrou"></div>
							</div>
							
							<div id="r5" class="ligneresultat">
								<div id="r5t1" class="petittrou"></div>
								<div id="r5t2" class="petittrou"></div>
								<div id="r5t3" class="petittrou"></div>
								<div id="r5t4" class="petittrou"></div>
							</div>
							
							<div id="r4" class="ligneresultat">
								<div id="r4t1" class="petittrou"></div>
								<div id="r4t2" class="petittrou"></div>
								<div id="r4t3" class="petittrou"></div>
								<div id="r4t4" class="petittrou"></div>
							</div>
							
							<div id="r3" class="ligneresultat">
								<div id="r3t1" class="petittrou"></div>
								<div id="r3t2" class="petittrou"></div>
								<div id="r3t3" class="petittrou"></div>
								<div id="r3t4" class="petittrou"></div>
							</div>
							
							<div id="r2" class="ligneresultat">
								<div id="r2t1" class="petittrou"></div>
								<div id="r2t2" class="petittrou"></div>
								<div id="r2t3" class="petittrou"></div>
								<div id="r2t4" class="petittrou"></div>
							</div>
							
							<div id="r1" class="ligneresultat">
								<div id="r1t1" class="petittrou"></div>
								<div id="r1t2" class="petittrou"></div>
								<div id="r1t3" class="petittrou"></div>
								<div id="r1t4" class="petittrou"></div>
							</div>
						</div>
					
					
						<div id="lines">
							<div id="l12" class="ligne">
								<div id="l12t1" class="grostrou"></div>
								<div id="l12t2" class="grostrou"></div>
								<div id="l12t3" class="grostrou"></div>
								<div id="l12t4" class="grostrou"></div>
							</div>
							
							<div id="l11" class="ligne">
								<div id="l11t1" class="grostrou"></div>
								<div id="l11t2" class="grostrou"></div>
								<div id="l11t3" class="grostrou"></div>
								<div id="l11t4" class="grostrou"></div>
							</div>
							
							<div id="l10" class="ligne">
								<div id="l10t1" class="grostrou"></div>
								<div id="l10t2" class="grostrou"></div>
								<div id="l10t3" class="grostrou"></div>
								<div id="l10t4" class="grostrou"></div>
							</div>
							
							<div id="l9" class="ligne">
								<div id="l9t1" class="grostrou"></div>
								<div id="l9t2" class="grostrou"></div>
								<div id="l9t3" class="grostrou"></div>
								<div id="l9t4" class="grostrou"></div>
							</div>
							
							<div id="l8" class="ligne">
								<div id="l8t1" class="grostrou"></div>
								<div id="l8t2" class="grostrou"></div>
								<div id="l8t3" class="grostrou"></div>
								<div id="l8t4" class="grostrou"></div>
							</div>
							
							<div id="l7" class="ligne">
								<div id="l7t1" class="grostrou"></div>
								<div id="l7t2" class="grostrou"></div>
								<div id="l7t3" class="grostrou"></div>
								<div id="l7t4" class="grostrou"></div>
							</div>
							
							<div id="l6" class="ligne">
								<div id="l6t1" class="grostrou"></div>
								<div id="l6t2" class="grostrou"></div>
								<div id="l6t3" class="grostrou"></div>
								<div id="l6t4" class="grostrou"></div>
							</div>
							
							<div id="l5" class="ligne">
								<div id="l5t1" class="grostrou"></div>
								<div id="l5t2" class="grostrou"></div>
								<div id="l5t3" class="grostrou"></div>
								<div id="l5t4" class="grostrou"></div>
							</div>
							
							<div id="l4" class="ligne">
								<div id="l4t1" class="grostrou"></div>
								<div id="l4t2" class="grostrou"></div>
								<div id="l4t3" class="grostrou"></div>
								<div id="l4t4" class="grostrou"></div>
							</div>
							
							<div id="l3" class="ligne">
								<div id="l3t1" class="grostrou"></div>
								<div id="l3t2" class="grostrou"></div>
								<div id="l3t3" class="grostrou"></div>
								<div id="l3t4" class="grostrou"></div>
							</div>
							
							<div id="l2" class="ligne">
								<div id="l2t1" class="grostrou"></div>
								<div id="l2t2" class="grostrou"></div>
								<div id="l2t3" class="grostrou"></div>
								<div id="l2t4" class="grostrou"></div>
							</div>
							
							<div id="l1" class="ligne">
								<div id="l1t1" class="grostrou"></div>
								<div id="l1t2" class="grostrou"></div>
								<div id="l1t3" class="grostrou"></div>
								<div id="l1t4" class="grostrou"></div>
							</div>
						</div>
						
						<div id="solution"></div>
						<div id="saisie" class="ligne">
							<div class="saisietrou"></div>
							<div class="saisietrou"></div>
							<div class="saisietrou"></div>
							<div class="saisietrou"></div>
							<div id="valider"></div>
						</div>
						<div id="saisiedrop" class="lignedrop">
							<div id="s1" class="saisietroudrop"></div>
							<div id="s2" class="saisietroudrop"></div>
							<div id="s3" class="saisietroudrop"></div>
							<div id="s4" class="saisietroudrop"></div>
						</div>
					</div>
					
					<div id="list-img">
						<div class="pion-dessous w-dessous"></div><img id="w" src="images/pions/w.png" alt="Pion Blanc" class="pions" />
						<div class="pion-dessous b-dessous"></div><img id="b" src="images/pions/b.png" alt="Pion Bleu" class="pions" />
						<div class="pion-dessous y-dessous"></div><img id="y" src="images/pions/y.png" alt="Pion Jaune" class="pions" />
						<div class="pion-dessous p-dessous"></div><img id="p" src="images/pions/p.png" alt="Pion Noir" class="pions" />
						<div class="pion-dessous o-dessous"></div><img id="o" src="images/pions/o.png" alt="Pion Orange" class="pions" />
						<div class="pion-dessous f-dessous"></div><img id="f" src="images/pions/f.png" alt="Pion Rose" class="pions" />
						<div class="pion-dessous r-dessous"></div><img id="r" src="images/pions/r.png" alt="Pion Rouge" class="pions" />
						<div class="pion-dessous g-dessous"></div><img id="g" src="images/pions/g.png" alt="Pion Vert" class="pions" />
					</div>
					<form id="resultats" method="post" action="">
						<p><input type="hidden" name="s1" value="" /></p>
						<p><input type="hidden" name="s2" value="" /></p>
						<p><input type="hidden" name="s3" value="" /></p>
						<p><input type="hidden" name="s4" value="" /></p>
					</form>
					
					
		    </div>
		</div>
		<div id="footer">
				<div id="soundOnOff"><p class="soundOnOff-text">D&eacute;sactiv&eacute;</p></div>
		</div>
    </div>
  </body>
</html>
